<template>
	<view class="pages">
		<view class="bg">
			<image :src="userProfile.backgroundUrl" mode=""></image>
		</view>
		<view class="nav-bar">
			<view class="nav-bar-left" @click="gohome">
				<u-icon name="arrow-leftward" color="#fff" size="55rpx"></u-icon>
			</view>
			<view class="nav-bar-center">预留</view>
			<view class="nav-bar-right">
				<u-icon name="more-dot-fill" color="#fff" size="55rpx"></u-icon>
			</view>
		</view>
		<!-- 卡片信息 -->
		<view class="card">
			<view class="avatar">
				<image :src="userProfile.avatarUrl" mode=""></image>
			</view>
			<view class="card-title">
				<text>{{ userProfile.nickname }}</text>
				<image :src="userProfile.avatarDetail.identityIconUrl" class="_image1" v-if="userProfile.avatarDetail"></image>

				<!-- image :src="svip.associator.dynamicIconUrl" v-if="userProfile.userId == this.loginuse.userId && svip.associator" class="_image2"></image> -->
			</view>
			<view class="card-message">
				<text>{{ userProfile.follows }}关注</text>
				<text class="card-message-center">{{ userProfile.followeds | count }}粉丝</text>
				<text>Lv.8</text>
			</view>

			<view class="card-tips">
				<view class="ips all">
					<text>IP属地：{{ totalPrice }}</text>
				</view>
				<view class="year all">
					<text>村龄{{ userProfile.createTime | year }}年</text>
				</view>
				<view class="selsect all">
					<u-icon name="arrow-right" color="#fff" size="15rpx "></u-icon>
				</view>
			</view>
		</view>
		<view class="detail">
			<user-detail :msg="userProfile" :userFound="userFound" :collectSongs="collectSongs"></user-detail>
		</view>

		<!-- tabs -->
		<!-- <view class="tabs_wrapper">
			<u-tabs :list="tabs" :current="current" @change="change" :scrollable="false" itemStyle="width:28%;">
			</u-tabs>
		</view>

		<swiper :current="current" @change="changCurrent" class="swiper-info">
			<swiper-item>
				<user-detail :msg="msg" :userFound="userFound" :collectSongs="collectSongs"></user-detail>
			</swiper-item>
			<swiper-item>
				<dynamic :events="events" :trends="trends"></dynamic>
			</swiper-item>
			<swiper-item>
				<broad-list></broad-list>
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
import { _getUserInfo, _getVipInfo, _getUserSongsheet, _getUserEvent, _getUserDj } from '@/http/users.js';
import citys from '@/utils/citys.js';
import moment from 'moment';

import Dynamic from '@/view/Dynamic/Dynamic.vue';
import UserDetail from '@/view/UserDetail/UserDetail.vue';
import BroadList from '@/view/BroadList/BroadList.vue';

export default {
	components: {
		UserDetail,
		Dynamic,
		BroadList
	},
	data() {
		return {
			uid: '', //储存用户id
			userInfo: [],
			userProfile: [],
			tabs: [
				{
					name: '主页'
				},
				{
					name: '动态'
				},
				{
					name: '播客'
				}
			],
			current: 0, //下标
			svip: [],
			loginuse: uni.getStorageSync('UserData').profile,
			userFound: [], //用户创建歌单
			collectSongs: [], //收藏的歌单
			events: [], //用户动态
			trends: []
		};
	},
	onLoad(e) {
		this.uid = e.id;
	},
	created() {
		this.getUserInfo();
		this.getVipInfo();
		this.getUserSongsheet();
		this.getUserEvent();
		this.getUserDj();
	},

	methods: {
		//点击选中哪个tab为激活状态
		change(item) {
			this.current = item.index;
		},
		changCurrent(e) {
			this.current = e.detail.current;
		},
		gohome() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 获取用户详情
		async getUserInfo() {
			const res = await _getUserInfo(this.uid);
			this.userInfo = res;
			this.userProfile = res.profile;
			console.log(this.userInfo);
		},

		// 获取会员信息
		async getVipInfo() {
			const { data = [] } = await _getVipInfo();
			this.svip = data;
		},

		// 获取用户歌单
		async getUserSongsheet() {
			const { playlist = [] } = await _getUserSongsheet(this.uid);
			this.userFound = playlist.filter((item) => {
				return item.userId == this.uid;
			});
			this.collectSongs = playlist.filter((item) => {
				return item.userId != this.uid;
			});
		},
		// 获取用户动态
		async getUserEvent() {
			const { events = [] } = await _getUserEvent(this.uid);
			this.events = events;
			events.forEach((arr) => {
				const obj = JSON.parse(arr.json);
				this.trends.push(obj);
			});
			console.log(this.events);
		},

		async getUserDj() {
			const res = await _getUserDj(this.uid);
			console.log(res);
		}
	},
	computed: {
		totalPrice() {
			let Code = 0;
			let Name = '';
			for (let i = 0; i < citys.length; i++) {
				if (this.userProfile.province == citys[i].provinceCode) {
					Name = citys[i].provinceName;
				} else if (this.userProfile.province == 0) {
					Name = '未知';
				}
			}
			return Name;
		}
	},
	filters: {
		times(value) {
			return moment(value).format('YYYY年MM月');
		},
		year(value) {
			const num = moment().format('YYYY') - moment(value).format('YYYY');
			return num;
		},
		count(v) {
			return v > 10000 ? (v / 10000).toFixed(1) + '万' : v;
		}
	}
};
</script>

<style lang="scss" scoped>
.pages {
	background-color: #f6f6f6;
	// height: 100vh;
}

// 背景
.bg {
	width: 100%;
	height: 500rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

// 导航

.nav-bar {
	width: 100%;
	position: absolute;
	top: 0;
	display: flex;
	margin-top: 30rpx;

	&-left {
		width: 85rpx;
		margin-left: 30rpx;
	}

	&-center {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	&-right {
		margin-right: 30rpx;
	}
}

// 卡片

.card {
	margin: 0 30rpx;
	border-radius: 15rpx;
	background: rgb(50, 64, 91);
	background: linear-gradient(253deg, rgba(50, 64, 91, 1) 38%, rgba(73, 129, 162, 1) 100%, rgba(73, 129, 162, 1) 100%);
	// background-color: $u-primary-light;
	display: flex;
	margin-top: -30rpx;
	z-index: 99999;
	position: relative;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #fff;
	box-shadow: 2px 5px 5px #888888;

	.avatar {
		margin-top: -35px;
		z-index: 9999;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}
	}

	&-title {
		display: flex;
		align-items: center;
		color: #fff;
		font-weight: bold;

		._image1 {
			width: 45rpx;
			height: 45rpx;
			margin-left: 15rpx;
		}

		._image2 {
			width: 80rpx;
			height: 35rpx;
			margin-left: 15rpx;
		}
	}

	&-message {
		margin: 15rpx;
		font-size: 30rpx;
		color: #9bb0c1;

		&-center {
			padding: 0 30rpx;
		}
	}

	&-tips {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		font-size: 25rpx;

		.all {
			height: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 15rpx;
			margin-right: 15rpx;
			border-radius: 15rpx;
			background-color: rgba(255, 255, 255, 0.2);
		}
	}
}

.tabs_wrapper {
	margin: 30rpx 0rpx;
}

.swiper-info {
	height: calc(100vh);
}
</style>
